<template>
  <div>
    <el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" @close="close" center>
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="版本号" v-if="title == '添加'">
            <!-- <el-input v-model="versionNum" :disabled="true"></el-input> -->
            {{ versionNum }}
          </el-form-item>
          <el-form-item label="项目类型" prop="projectType">
            <el-select v-model="ruleForm.projectType" placeholder="请选择项目类型">
              <el-option label="管理类 " value="1"></el-option>
              <el-option label="自研产品" value="2"></el-option>
              <el-option label="委托开发" value="3"></el-option>
              <el-option label="市场" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="需求责任人" prop="demandUserId" v-if="title == '添加'">
            <el-select v-model="ruleForm.demandUserId" multiple placeholder="请选择需求责任人">
              <el-option v-for="item in demandUserList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属板块" prop="plateId">
            <el-select v-model="ruleForm.plateId" placeholder="请选择所属板块">
              <el-option v-for="item in plateOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意向">
            <el-radio-group v-model="ruleForm.intention" style="width: 100%">
              <el-col :span="8">
                <el-form-item prop="date1">
                  <el-radio :label="2">高</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="date1">
                  <el-radio :label="1">一般</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="date1">
                  <el-radio :label="0">低</el-radio>
                </el-form-item>
              </el-col>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售状态" prop="saleStatus">
            <el-select v-model="ruleForm.saleStatus" placeholder="请选择所属板块">
              <el-option label="跟踪" value="0"></el-option>
              <el-option label="暂停" value="1"></el-option>
              <el-option label="关闭" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商机来源">
            <el-col :span="11">
              <el-select v-model="messageSource_text" clearable placeholder="请选择所属板块" @change="handleRegionChange">
                <el-option label="老客户" value="老客户"></el-option>
                <el-option label="合作伙伴" value="合作伙伴"></el-option>
                <el-option label="网络" value="网络"></el-option>
                <el-option label="电话" value="电话"></el-option>
                <el-option label="陌拜" value="陌拜"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-form-item prop="text">
                <el-input v-model="ruleForm.text" :disabled="textFlag"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="备注信息" prop="saleRemark">
            <el-input type="textarea" placeholder="请输入内容" v-model="ruleForm.saleRemark" maxlength="200"
              :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectProjectPlate, getRequirementUserDuty } from "@/service/Api";
// import { getPrincipalList } from "@/service/progressApi";

export default {
  name: "dialog.vue",
  data() {
    return {
      title: "",
      centerDialogVisible: false,
      demandUserList: [], //需求责任人
      plateOption: [], //板块
      textFlag: true,
      messageSource_text: "",
      versionNum: "V1.0",
      ruleForm: {
        name: "", //项目名称
        demandUserId: "", //需求责任人id
        projectType: "4",//项目类型
        plateId: "", //板块id
        intention: 0, //意向
        saleStatus: "", //销售状态
        messageSource: "", //商机来源
        saleRemark: "", //备注
        text: "",
        id: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        projectType: [
        {
            required: true,
            message: "请选择项目类型",
            trigger: "change",
          },
        ],
        demandUserId: [
          {
            required: true,
            message: "请选择需求责任人",
            trigger: "change",
          },
        ],
        plateId: [
          {
            required: true,
            message: "请选择板块",
            trigger: "change",
          },
        ],
        saleStatus: [
          {
            required: true,
            message: "请选择销售状态",
            trigger: "change",
          },
        ],
        // saleRemark: [
        //   { required: true, message: '请填写备注信息', trigger: 'blur' }
        // ]
      },
    };
  },
  created() {
    this.getSelectProjectPlate();
  },
  watch: {
    messageSource_text: {
      handler: function (newValue, oldValue) {
        this.textFlag = newValue.length === 0 ? true : false;
      },
      immediate: true,
    },
  },
  methods: {
    close() {
      this.centerDialogVisible = false;
    },
    //弹窗板块列表、需求责任人
    getSelectProjectPlate() {
      selectProjectPlate().then((resposne) => {
        const { code, data } = resposne;
        if (code !== 0) return;
        this.plateOption = data;
      });
      getRequirementUserDuty().then((res) => {
        console.log("售前项目需求责任人下拉框列表", res);
        if (res.code === 0) {
          if (res.data.length > 0) {
            this.demandUserList = res.data;
          }
        }
      });
    },
    showDialog(data = null) {
      this.centerDialogVisible = true;
      if (data) {
        this.$nextTick(() => {
          this.title = "修改";
          // this.ruleForm = data
          this.ruleForm.name = data.name;
          this.ruleForm.plateId = data.plateId;
          this.ruleForm.text = data.messageSource.split("-")[1];
          this.messageSource_text = data.messageSource.split("-")[0];
          this.ruleForm.saleStatus = String(data.saleStatus);
          this.ruleForm.saleRemark = data.saleRemark;
          this.ruleForm.intention = data.intention;
          this.ruleForm.id = data.id;
        });
      } else {
        this.title = "添加";
        this.$nextTick(() => {
          this.resetForm("ruleForm");
          this.messageSource_text = "";
        });
      }
    },
    handleSaveClick() {
      this.submitForm("ruleForm");
    },
    handleRegionChange(val) {
      this.ruleForm.messageSource = val + "-";
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm.demandUserId);
          if (this.ruleForm.demandUserId) {
            this.ruleForm.demandUserId = this.ruleForm.demandUserId.join(",");
          }
          console.log(this.messageSource_text);

          //   this.ruleForm.messageSource += this.ruleForm.text;
          console.log(this.ruleForm.text);
          if (this.ruleForm.text) {
            this.ruleForm.messageSource =
              this.messageSource_text + "-" + this.ruleForm.text;
          } else {
            console.log("具体来源未填写");
            this.ruleForm.messageSource = this.messageSource_text;
          }
          console.log(this.ruleForm.messageSource);
          console.log(this.ruleForm);

          this.$emit("dialogResult", this.ruleForm, this.title);
          this.close();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>
